<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">

            <h:form id="bairroForm" enctype="multipart/form-data">
                <p:panel styleClass="withoutBorder" rendered="#{!managerLayout.desabilitarMapa() and managerCriarBairro.connect}">
                    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" />
                </p:panel>

                <h3 class="title">Cadastrar Bairro</h3>
                <p:growl id="messages" showDetail="false" autoUpdate="true"  /> 
                <p:panel id="personPanel" styleClass="container_24 clearfix both withoutBorder">
                    <h4 class="title">Dados Gerais</h4>

                    <p:outputLabel value="Nome" styleClass="grid_3" for="nome"/>
                    <p:inputText id="nome" styleClass="grid_15" value="#{managerCriarBairro.bairro.nome}" 
                                 required="true"/>
                    <div class="clear"/>

                    <p:outputLabel value="Cidade" styleClass="grid_3" for="cidade"/>
                    <p:autoComplete id="cidade" styleClass="grid_16" dropdown="true" converter="cidadeconverter"
                                    var="cityValue" itemLabel="#{cityValue.nome.toString().concat(' - ').concat(cityValue.estado.sgl)}"
                                    itemValue="#{cityValue}" value="#{managerCriarBairro.cidade}"
                                    scrollHeight="200" forceSelection="true" required="true"
                                    completeMethod="#{managerUtilitario.autocompleteCidade}"/>

                    <div class="clear"/>

                </p:panel>
                <h4 class="title">Georreferenciamento</h4>

                <p:panel id="geoPanel" styleClass="container_24 clearfix withoutBorder">
                    <div class="buttonAction">
                        <p:gmap id="map" center="#{managerCriarBairro.centroMapa}" zoom="#{managerCriarBairro.zoomLevelMapa}" 
                                type="ROADMAP" rendered="#{!managerLayout.desabilitarMapa() and managerCriarBairro.connect}"
                                style="width:97%;height:500px" model="#{managerCriarBairro.mapModel}" >

                            <p:ajax event="stateChange" listener="#{managerCriarBairro.onStateChange}"/>
                            <p:ajax event="pointSelect" update="@this" listener="#{managerCriarBairro.handlePointClick}" />
                            <p:ajax event="markerDrag" update="@this" listener="#{managerCriarBairro.onMarkerDrag}" />

                        </p:gmap>
                        <div style="float: left; margin-top: -39px; margin-left: 75px;">
                            <p:commandButton value="Remover pontos" icon="ui-icon-trash" 
                                             update="@form" process="@this"
                                             rendered="#{!managerLayout.desabilitarMapa() and managerCriarBairro.connect}"
                                             actionListener="#{managerCriarBairro.removerMarkers()}"
                                             style="font-size: 12px; width: 140px !important"
                                             styleClass="ui-priority-primary" />
                        </div>

                        <p:outputLabel value="O Georreferenciamento foi desabilitado pois não foi possível estabelecer uma conexão com a Internet !"
                                       rendered="#{!managerLayout.desabilitarMapa() and !managerCriarBairro.connect}"/>

                        <p:outputLabel value="O Georreferenciamento foi desabilitado pelo administrador do sistema !"
                                       rendered="#{managerLayout.desabilitarMapa()}"/>
                    </div>
                </p:panel>

                <br/>
                <div class="buttonAction">
                    <p:commandButton value="Salvar" icon="ui-icon-disk" 
                                     update="@form" 
                                     actionListener="#{managerCriarBairro.salvar()}"
                                     styleClass="ui-priority-primary" />

                    <p:button href="pesquisarbairro.xhtml" value="Cancelar"  icon="ui-icon-trash" />
                </div >
            </h:form>

        </ui:define> 
    </ui:composition>

</html>
